<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="所属小区">
        <el-select v-model="form.communityId" placeholder="请选择">
          <el-option
            v-for="item in communityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="车辆图片" prop="image">
        <el-upload
          :file-list="fileList"
          action="undefined"
          list-type="picture-card"
          :auto-upload="true"
          :limit="1"
          :before-upload="beforeUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i slot="default" class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl || form.image" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="车辆型号">
        <el-input v-model="form.model" />
      </el-form-item>

      <el-form-item label="车牌号">
        <el-input v-model="form.plate" />
      </el-form-item>

      <el-form-item label="所属业主">
        <el-input v-model="form.ownerName" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCommunityList } from '@/api/community'
import { validSubmitform } from '@/utils/validate'
import { addRow } from '@/api/vehicle'
import { uploadFile } from '@/api/upload'

export default {
  data() {
    return {
      form: {
        communityId: '',
        image: '',
        model: '',
        plate: '',
        ownerName: ''
      },
      communityList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: []
    }
  },
  mounted() {
    this.fetchCommunityList()
  },
  methods: {
    fetchCommunityList() {
      getCommunityList().then(response => {
        this.communityList = response.data
      })
    },
    async beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.warning('上传文件大小不能超过 5MB!')
        return false
      }

      const formData = new FormData()
      formData.append('file', file)

      const response = await uploadFile(formData)
      if (response && response.data) {
        this.form.image = response.data
        this.fileList = [{ name: file.name, url: response.data }]
        this.$message.success('图片上传成功')
        return false
      } else {
        this.$message.error('图片上传失败')
        return false
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url || this.form.image
      this.dialogVisible = true
    },
    handleRemove(file) {
      this.form.image = ''
      this.fileList = []
    },
    onReset() {
      this.form = {
        communityId: '',
        image: '',
        model: '',
        plate: '',
        ownerName: ''
      }
      this.fileList = []
      this.$message({
        message: '已重置',
        type: 'warning'
      })
    },
    onSubmit() {
      if (validSubmitform(this.form)) {
        addRow(this.form)
          .then(response => {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          }).catch(error => {
            this.$message({
              message: error.data.msg,
              type: 'error'
            })
          })
      } else {
        this.$message({
          message: '请填写完整信息',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
